<template>
  <div style="width: 100%; height: 100%">
    <h3>头像设置</h3>
    <div class="title">
      <el-col :span="9" class="pictuer">
        <div
          style="
            width: 90px;
            height: 90px;
            border-radius: 45px;
            overflow: hidden;
          "
        >
          <img :src="imgUrl" alt="" style="width: 100%; height: 100%" />
        </div>
      </el-col>
      <el-col :span="15">
        <p>昵称：{{ name }}</p>
        <el-upload
          class="upload-demo"
          :http-request="uploadImg"
          :on-preview="handlePreview"
          :file-list="fileList"
          list-type="picture"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">切换当前头像</el-button>
        </el-upload>
      </el-col>
    </div>
    <h3>
      密码设置
      <el-button
        style="float: right"
        size="small"
        type="primary"
        @click="SubmitPassword"
        >更改密码</el-button
      >
    </h3>
    <div class="password">
      <el-form ref="form" :model="deForm" :rules="rules" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="deForm.oldPassword"
            show-password
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="deForm.newPassword"
            show-password
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <h3>背景设置</h3>
    <div class="setBackGround">
      <el-upload
        class="upload-demo"
        :http-request="uploadBg"
        :on-preview="handlePreview"
        :file-list="fileList"
        list-type="picture"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">切换背景</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { PICT } from "../../../store/mutation_types";
import { HeadPicture, changePassword, changeBgImg } from "@/api/users";

export default {
  data() {
    return {
      name: "ming",
      isChange: true,
      fileList: [],
      deForm: {},
      url: "",
      imgUrl: "",
      rules: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    "$store.state.user.headPict": {
      handler(newVal, oldVal) {
        console.log(newVal);
        this.imgUrl = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handlePreview(file) {
      if (file.raw.type != "image/jpeg") {
        this.$message.warnning("只能选择image/jpeg格式");
      }
    },
    async uploadImg(param) {
      let formData = new FormData();
      formData.append("file", param.file);
      let res = await HeadPicture(formData);
      if (res.status == 200) {
        this.$store.state.user.headPict = res.data.imgPath;
      }
    },
    async onUploadChange(file) {
      if (file.status !== "ready") return;
      let res = await HeadPicture(file.url);
      if (res.success) {
        Vue.ls.remove(PICT);
        Vue.ls.set(PICT, res.data.img);
        this.$store.state.user.headPict = Vue.ls.get(PICT);
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    },
    async SubmitPassword() {
      let res = await changePassword(this.deForm);
      if (res.success) {
        this.$message.success(res.message);
        this.deForm = {};
      } else {
        this.$message.warnning(res.message);
      }
    },
    async uploadBg(param) {
      let formData = new FormData();
      formData.append("file", param.file);
      let res = await changeBgImg(formData);
      if (res.status == 200) {
        this.$store.commit("SET_BGPICT", res.data.imgPath);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.title {
  width: 100%;
  height: 17%;
  .picture {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.upload {
  width: 100%;
  height: 40%;
  border: 1px solid red;
}
.password {
  width: 100%;
  height: 120px;
  /deep/ .el-form-item__label {
    color: black;
    font-size: 16px;
  }
}
.setBackGround {
  width: 100%;
  height: 50px;
}
</style>